<template>
  <div>
    <el-tabs>
      <el-tab-pane :label="lab + `(${tabs.length})`" name="first">
        <ul>
          <li v-for="item in tabs" :key="item.id">
            <div class="item">
              <p class="boxq">{{ item.title }}</p>
              <p>{{ item.date }}</p>
              <button @click="tab1(item)">标为已读</button>
              <hr />
            </div>
          </li>
        </ul>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tabs.length"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane :label="lab1 + `(${tabs1.length})`" name="second">
        <ul>
          <li v-for="item in tabs1" :key="item.id">
            <div class="item">
              <p class="boxq">{{ item.title }}</p>
              <p>{{ item.date }}</p>
              <button @click="tab2(item)">删除</button>
              <button @click="tab3(item)">还原未读</button>
              <hr />
            </div>
          </li>
        </ul>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tabs1.length"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane :label="lab2 + `(${tabs2.length})`" name="third">
        <ul>
          <li v-for="item in tabs2" :key="item.id">
            <div class="item">
              <p class="boxq">{{ item.title }}</p>
              <p>{{ item.date }}</p>
              <button @click="tab4(item)">还原</button>
              <hr />
            </div>
          </li>
        </ul>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tabs2.length"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tabss:[],
      tabs: [],
      tabs1: [],
      tabs2:[],
      lab: "未读消息",
      lab1: "已读消息",
      lab2: "回收站",
      pagenum: 1,
      pagesize: 8,
    };
  },
  created () {
    this.getdata();
  },
  methods: {
    async getdata(){
      var res=await this.$axios.get("/tabs.json")
      console.log(res);
      
      this.tabs=res.data.unread;
      this.tabs1=res.data.read;
      this.tabs2=res.data.recycle;
      this.userdata();
    },
    /**
     * 分页
     */
    userdata() {
      let start = (this.pagenum - 1) * this.pagesize; //  开始截取
      let end = this.pagenum * this.pagesize; //  截取最后的位置
      this.tabs = this.tabs.slice(start, end); //  当前中间的数据
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.userdata();
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.userdata();
      this.getdata();
    },
    tab1(item) {
      console.log(item);
      this.tabs.splice(item, 1);
      this.tabs1.push(item);
    },
    tab2(item) {
      this.tabs1.splice(item, 1);
      this.tabs2.push(item);
    },
    tab3(item) {
      this.tabs1.splice(item, 1);
      this.tabs.push(item);
    },
    tab4(item) {
      this.tabs2.splice(item, 1);
      this.tabs1.push(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  margin-top: 10px;
  p {
    margin-right: 20px;
  }
  .boxq {
    padding-left: 10px;
    width: 70%;
  }
}
</style>